/* 定义CSS变量，方便统一管理和修改样式 */
:root {
    --button-size: 70px; /* 按钮的宽度和高度 */
    --button-radius: 10px; /* 按钮的圆角大小 */
    --button-transition: background-color 0.3s ease, transform 0.2s ease; /* 按钮的过渡效果 */
    --active-bg-color: #3d8b40; /* 按钮点击时的背景颜色 */
    --hover-scale: scale(1.1); /* 鼠标悬停时的缩放效果 */
    --active-animation: bounce 0.3s ease; /* 按钮点击时的动画效果 */
}

/* 基础按钮样式 */
.button-container button {
    background-size: cover; /* 背景图片覆盖整个按钮 */
    background-position: center; /* 背景图片居中显示 */
    width: var(--button-size); /* 使用变量设置按钮宽度 */
    height: var(--button-size); /* 使用变量设置按钮高度 */
    border: none; /* 去掉按钮的默认边框 */
    border-radius: var(--button-radius); /* 使用变量设置按钮圆角 */
    cursor: pointer; /* 鼠标悬停时显示手型指针 */
    transition: var(--button-transition); /* 使用变量设置过渡效果 */
}

/* 鼠标悬停效果 */
.button-container button:hover {
    background-color: var(--hover-bg-color); /* 使用变量设置悬停背景颜色 */
    transform: var(--hover-scale); /* 使用变量设置悬停缩放效果 */
}

/* 按钮点击效果 */
.button-container button:active {
    background-color: var(--active-bg-color); /* 使用变量设置点击背景颜色 */
    animation: var(--active-animation); /* 使用变量设置点击动画效果 */
}

/* 定义每个按钮的背景图片 */
.deepseek-button {
    background-image: url('../image/deepseek.png'); /* DeepSeek按钮的背景图片 */
}

.gpt-button {
    background-image: url('../image/gpt.png'); /* GPT按钮的背景图片 */
}

.bili-button {
    background-image: url('../image/bili.png'); /* 哔哩哔哩按钮的背景图片 */
}

.jd-button {
    background-image: url('../image/jd.png'); /* 京东按钮的背景图片 */
}

.tb-button {
    background-image: url('../image/tb.png'); /* 淘宝按钮的背景图片 */
}

.gitee-button {
    background-image: url('../image/gitee.jpg'); /* 闲鱼按钮的背景图片 */
}

.github-button {
    background-image: url('../image/git.png'); /* GitHub按钮的背景图片 */
}

.aly-button {
    background-image: url('../image/aly.png'); /* GitHub按钮的背景图片 */
}
/* 定义bounce动画 */
@keyframes bounce {
    0%, 100% {
        transform: scale(1); /* 动画开始和结束时按钮大小为原始大小 */
    }
    50% {
        transform: scale(1.2); /* 动画中间按钮放大到1.2倍 */
    }
}